<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
   .vv1{
       width: 500px;
       height: 580px;
       margin: 100px auto;
       /* background-color: aqua; */
       transform: rotate(-60deg) skewY(30deg);
       overflow: hidden;
   }
   a{
       display: block;
       width: 100%;
       height: 100%;
       background-color: pink;
       transform:  skewY(-30deg) rotate(60deg);
       background: url(images/timg.jpg) no-repeat;
      text-decoration: none;
      overflow: hidden;
   }
   h2{
       float: left;
       width: 50%;
       height: 100%;
       background: rgba(0 ,0 ,0, .2);
       text-align: center;
       padding-top: 180px;
       color: aqua;
       transform: translateX(-100%);
       transition: all 2s;
       box-sizing: border-box;
      
   }
   p{
       float:right;
       width: 50%;
       height: 100%;
       background: rgba(0, 0 ,0, .2);
       /* background-color: aqua; */
       text-align: center;
       padding-top: 50px;
       margin-bottom: 30px;
       color: blue;
       padding: 120px;
       box-sizing: border-box;
       transform: translateX(100%);
       transition: all 2s;
   }
   a:hover h2,
   a:hover p{
       transform: none;
   }
   </style>
</head>
<body>
    <div class="vv1">
        <a href="#">
            <h2>牧马人</h2>
            <p>越野就是这么任性,天生任性</p>
        </a>
    </div>
</body>
</html>